<template>
	<div class="system-edit-role-container">
		<el-dialog :title="(formData.id===0?'':'')+'审核'" v-model="isShowDialog" width="769px">
			<el-form ref="formRef" :model="formData" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="formData.remark" placeholder="请输入审核原因" clearable></el-input>
						</el-form-item>
					</el-col>
       
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit('pass')" size="default" :loading="loading">{{formData.id===0?'通过':'通过'}}</el-button>
          <el-button type="primary" @click="onSubmit('reject')" size="default" :loading="loading">{{formData.id===0?'不通过':'不通过'}}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
import {apiwithdrawaudit } from '/@/api/financialmanagement/financialmanagementlevel';
import {ElMessage} from "element-plus";
import {refreshBackEndControlRoutes} from "/@/router/backEnd";


// 定义接口来定义对象的类型
interface DialogRow {
  id:string;
	action: string;
  remark: string;
}
interface RoleState {
  loading:boolean;
	isShowDialog: boolean;
	formData: DialogRow;
}

export default defineComponent({
	name: 'systemEditRole',
	setup(props,{emit}) {
    const formRef = ref<HTMLElement | null>(null);
    const menuRef = ref();
		const state = reactive<RoleState>({
      loading:false,
			isShowDialog: false,
			formData: {
        id:'',
        action:'',
        remark: '',
			},
		});
		// 打开弹窗
		const openDialog = (row?: DialogRow) => {
      var id = row?.id
      state.formData.id = id
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = (row:any) => {
      state.formData.action = row
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          state.loading = true;
          // state.formData.menuIds = getMenuAllCheckedKeys();
          if(row==="pass"){
            //通过
            apiwithdrawaudit(state.formData).then(()=>{
              ElMessage.success('审核通过');
              closeDialog(); // 关闭弹窗
              emit('getRoleList')
            }).finally(()=>{
              state.loading = false;
            })
          }else{
            //不通过
            apiwithdrawaudit(state.formData).then(()=>{
              ElMessage.error('审核不通过');
              closeDialog(); // 关闭弹窗
              emit('getRoleList')
            }).finally(()=>{
              state.loading = false;
            })
          }
        }
      });
		};

    // 重置菜单session
    const resetMenuSession = () => {
      refreshBackEndControlRoutes();
    };
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
      menuRef,
      formRef,
      resetMenuSession, 
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7!important;
  border-radius: 4px;
}
.system-edit-role-container {
	.menu-data-tree {
		border: var(--el-input-border, var(--el-border-base));
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
